<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现</title>
	</head>
	<body>
		<div id="app">
			ID:<input  type="text" disabled="disabled" v-model="user.id"/>
			姓名:<input  type="text" v-model="user.name"/>
			年龄:<input  type="text" v-model="user.age"/>
			性别:<input  type="text" v-model="user.sex"/>
			<button @click="updateUser">更新</button>
			
		<table id="tab1" border="1px" width="700px" align="center">
			<tr>
				<td colspan="5" align="center">
				  <h1>表格数据</h1>	
				</td>
			</tr>
			<tr align="center">
				<td>ID编号:</td>
				<td>名称:</td>
				<td>年龄:</td>
				<td>性别:</td>
				<td>操作:</td>
			</tr>
				<tr align="center" v-for="item in userList">
					<td v-text="item.id"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
					<td v-text="item.sex"></td>
					<td>
						<!-- 知识点:如果没有数据来源,不需要传参. -->
						<button @click="deleteUser(item.id)">删除</button>
						<button @click="updateUserBtn(item)">修改</button>
					</td>
				</tr>	
		</table>
		</div>
		<!-- 1.导入vue.js -->
		<script src="../js/vue.js"></script>
		<!-- 2.导入axios.js -->
		<script src="../js/axios.js"></script>
		<script>
			//操作
			/* 需求1:刷新页面之后,自动的发起ajax请求 */
			axios.defaults.baseURL="http://localhost:8090"
			const app=new Vue({
				el:"#app",
				data:{
					userList: [],
					user:{
						id: '',
						name: '',
						age: '',
						sex: ''
					}
				},
				methods:{
					getUserList(){
						axios.get("/getUser").then(result => {
							this.userList= result.data
							console.log(this.userList)
						})
					},
					deleteUser(id){
						axios.delete("/user/"+id)
							.then(result => {
								alert(result.data)
						     //删除成功之后,重新加载列表信息
						     this.getUserList()								
							})
					},
					updateUserBtn(user){
						this.user.id = user.id
						console.log(user)
					},
					
					updateUser(){
						//向后端提交数据
						axios.put("/updateUser",this.user)
							.then(result => {
								alert(result.data)
								this.getUserList()
							})
					}
				},
				mounted() {
					//页面加载完成之后调用函数
					this.getUserList()
				}
			})
		</script>
	</body>
</html>
